import React, { Component } from 'react';
import { Grid, Toast, ListView } from 'antd-mobile'; 
import './Main.less';
import SeperateLine from 'common/components/SeperateLine.js';
import Bottom from 'common/containers/Bottom.js';
import Search from 'common/components/search/Search.js';
import GoodsItem from 'common/components/goods/GoodsItem.js';
import ImgCarousel from 'common/components/carousel/ImgCarousel.js';

import * as common from 'common/common.js';
import * as goodsApi from 'common/api/GoodsApi.js';

class Main extends Component{
	
	constructor(props) {
		super(props);
		const ds = new ListView.DataSource({
			rowHasChanged: (row1, row2) => row1 !== row2
		});
		this.fetchData = [];
	    this.state = {
			hasMore: true,
    	 	pageNo: 0,
    	 	pageTotal: 100,
	      	ds: ds,
	      	isLoading: true,
			height: document.documentElement.clientHeight * 3 / 4,

			//轮播图
			adList: [
				"assets/img/ad/ad1.jpg",
				"assets/img/ad/ad2.jpg",
				"assets/img/ad/ad3.jpg",
			],

			// 快捷导航
	    	toolList: [
	    		{
					type: 'search',
	    			icon: 'assets/img/quick/3c.png',
  					text: "数码电器"
	    		},
	    		{
					type: 'search',
	    			icon: 'assets/img/quick/cloth.png',
  					text: "精品服饰"
	    		},
	    		{
					type: 'search',
	    			icon: 'assets/img/quick/fresh.png',
  					text: "生鲜食品"
	    		},
	    		{
					type: 'search',
	    			icon: 'assets/img/quick/entrance.png',
  					text: "进口商品"
	    		},
	    		{
					type: 'coupon',
	    			icon: 'assets/img/quick/coupon.png',
  					text: "领优惠券"
	    		},
	    		{
					type: 'cashCoupon',
	    			icon: 'assets/img/quick/cash.png',
  					text: "领代金券"
	    		},
	    		{
					type: 'delivery',
	    			icon: 'assets/img/quick/delivery.png',
  					text: "物流查询"
	    		},
	    		{
					type: 'charge',
	    			icon: 'assets/img/quick/charge.png',
  					text: "充值缴费"
	    		}
	    	]
	    }
	}

	renderRow = (item) => {
	    return (
			<div className="goodsItemWrapper">
				<GoodsItem data={item}></GoodsItem>
			</div>
		)
	}

	// 快捷菜单跳转
	quick = (ele, index) => {
		if(ele.type == "search"){
			common.gotoGoodsSearch({searchType: "quickTool", searchKeyword:ele.text})
		}
		if(ele.type == "charge"){
			common.gotoUserCash();
		}
	}

	renderHeader = () => {
		const { adList, toolList } = this.state;
		return (
			<div>
				<Search searchType="goodsName" searchKeyword=""></Search>
				<SeperateLine lineHeight={"0.6rem"}></SeperateLine>
				<ImgCarousel data={adList}></ImgCarousel>
				<Grid data={toolList} hasLine={false} columnNum={4} onClick={(ele, index)=>{this.quick(ele, index)}}/>
				<div className="userRecommend">
					<div className="userRecommendTitle">
						<span>为你推荐</span>
					</div>
				</div>
			</div>
		)
	}

	componentDidMount(){
		const height = document.documentElement.clientHeight;
		Toast.loading("", common.TIPS_LOADING_DURATION);
		setTimeout(() => {
			goodsApi.goodsRecommendList({
				pageNo: this.state.pageNo,
				pageSize: 10
			}).then(result => {
				Toast.hide();
				this.fetchData = [ ...this.fetchData, ...result.data.list];
			  	this.setState({
				  ds: this.state.ds.cloneWithRows(this.fetchData),
				  isLoading: false,
				  height: height
				});
			})
	  	}, 500);
	}
	
	onEndReached = (event) => {
		if(this.state.pageNo+2 > this.state.pageTotal){
		  this.setState({
			  hasMore: false
		  })
		  return;
	  }
	  if (this.state.isLoading && !this.state.hasMore) {
			return;
	  }
	  this.setState({ 
			isLoading: true, 
			pageNo: this.state.pageNo + 1
	  });
	  setTimeout(() => {
			goodsApi.goodsRecommendList({
				pageNo: this.state.pageNo,
				pageSize: 10
			}).then(result => {
			  this.fetchData = [ ...this.fetchData, ...result.data.list];
			   this.setState({
				  ds: this.state.ds.cloneWithRows(this.fetchData),
				  isLoading: false,
				});
			})
	  }, 500);
	}

	render(){
		return(
			<div className="main">
				<ListView
					style={{
					height: this.state.height,
					overflow: 'auto'
					}}
					ref={el => this.lv = el}
					dataSource={this.state.ds}
					renderRow={this.renderRow}
					renderHeader={this.renderHeader}
					renderFooter={() => (
					<div style={{ padding: '0 0 0.9rem 0', lineHeight: '1rem', textAlign: 'center', fontSize: '0.28rem' }}>
						{
							this.state.hasMore 
							?
								this.state.isLoading
								?
								'加载中...' 
								: 
								'上拉加载'
							:
							'加载完毕'
						}
					</div>
					)}
					renderBodyComponent={() => (
						<div>{this.children}</div>
					)}
					pageSize={100}
					scrollRenderAheadDistance={500}
					onEndReached={this.onEndReached}
					onEndReachedThreshold={10}
				/>
				<SeperateLine lineHeight={"1.1rem"}></SeperateLine>
				<Bottom selectedTab="main"></Bottom>
			</div>
		)
	}
}

export default Main;